
<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="dialogTitle + '填空'"
    size="39%"
    :visible.sync="visibility"
    :append-to-body="true"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="120px"
        style="width: 600px"
      >
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="dataForm.type">
            <el-radio label="text">文本</el-radio>
            <el-radio label="number">数字</el-radio>
            <el-radio label="date">日期</el-radio>
            <el-radio label="datetime">时间</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClose">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogType === 'create' ? handleCommit() : updateCommit()"
          >
            确 定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { toHtml, toTemplate, parseFillToData } from '../scripts/fill'
import { parseToData } from '@/views/manufacture/template/scripts/base.js'
export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    dialogType: {
      required: true,
      type: String,
      default: 'create'
    },
    currentData: {
      type: Object,
      default: null
    },
    dialogTitle: {
      required: true,
      type: String,
      default: '新建'
    }
  },
  data() {
    return {
      dataForm: {
        type: 'text'
      }
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.reset()
        if (this.currentData) {
          const data = parseToData(
            this.currentData.template,
            null,
            [parseFillToData],
            this.currentData.id,
            true
          )
          this.dataForm.type = data[0].type
        }
      }
    }
  },
  methods: {
    reset() {
      this.type = 'text'
    },
    handleClose() {
      this.visibility = false
    },
    handleCommit() {
      const params = {
        type: this.dataForm.type
      }
      const html = toHtml(params)
      const content = toTemplate(params)
      this.$emit('add', {
        content: content,
        html: html
      })
      this.visibility = false
    },
    updateCommit() {
      const params = {
        type: this.dataForm.type,
        options: this.dataForm.list
      }
      const html = toHtml(params)
      const content = toTemplate(params)
      this.$emit('update', {
        data: params,
        content: content,
        html: html,
        id: this.currentData.id
      })
      this.visibility = false
    }
  }
}
</script>

<style lang="scss">
</style>>
